<template>
	<view class="content">
		<view class="czyList" v-for="(item,index) in list" :key="index">
			<view class="listTop">
				<image class="beijing" src="../../static/czy/beijing.png" mode=""></image>
				<view class="czyxinxi">
					<view class="nameBox">
						<text class="name">姓名：</text>
						<text class="nametext">{{item.name}}</text>
					</view>
					<view class="sjhBox">
						<text class="sjh">手机号：</text>
						<text class="sjhtext">{{item.mobile}}</text>
					</view>
				</view>
			</view>
			<view class="listBottom">
				<view class="bianjiBox" @click="bianji(item.id)">
					<image class="bianjiImg" src="../../static/czy/bianji.png" mode=""></image>
					<text class="bianji">编辑</text>
				</view>
				<view class="shanchuBox" @click="del(item.id,index)">
					<image class="bianjiImg" src="../../static/czy/shanchu.png" mode=""></image>
					<text class="bianji">删除</text>
				</view>
			</view>
		</view>
	
		<view class="addczy" @click="goaddpeople">
			<view  class="addBox">
				<image class="tianjiaImg" src="../../static/czy/tianjia.png" mode=""></image>
				<text class="add">添加操作员</text>
			</view>
			<view class="wyyadd">
				مەشغۇلاتچى قوشۇش
			</view>
		</view>
	</view>
</template>

<script>
	import app from '@/util/api.js'
	export default{
		data(){
			return{
				list:[]
			}
		},
		methods:{
			goaddpeople(){
				app.nto('caozuoyuan/addcaozuoyuan')
			},
			gitList(){
				app.load()
				var data = {}
				app.request("user/operator_list",data).then(res=>{
					this.list  = res.data
					app.hide()
				})
			},
			del(id,index){
				app.confirm("是否删除该操作员?",()=>{
					let data = {
						id:id
					}
					app.request("user/operator_del",data,"POST").then(res=>{
						this.list.splice(index,1)
					})
				},()=>{})
			},
			bianji(id){
				app.nto("caozuoyuan/addcaozuoyuan",id)
			}
		},
		onShow(){
		
			this.gitList()
		}
	}
	
</script>

<style scoped>
	.content{
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 0 20rpx;
	}
	.czyList{
		margin-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}
	.listTop{
		position: relative;
		font-size: 0;
	}
	.beijing{
		width: 710rpx;
		height: 222rpx;
	}
	.czyxinxi{
		font-size: 30rpx;
		color: #ffffff;
		line-height: 28rpx;
		position: absolute;
		top: 0;
		padding-left: 34rpx;
	}
	.nameBox{
		padding-top: 53rpx;
		display: flex;
		align-items: center;
	}
	.sjhBox{
		padding-top: 40rpx;
		display: flex;
		align-items: center;
	}
	.nametext,.sjhtext{
		flex: 1;
		padding-left: 16rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.listBottom{
		padding: 14rpx 25rpx 14rpx 0;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.bianjiBox,.shanchuBox{
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}
	.bianjiImg{
		width: 25rpx;
		height: 25rpx;
	}
	.bianji{
		padding-left: 14rpx;
	}
	.shanchuBox{
		padding-left: 100rpx;
	}
	.addczy{
		border: 2rpx #cacaca dashed;
		display: flex;
		flex-direction: column;
		align-items: center;
	    padding: 30rpx 0;
		margin-top: 20rpx;
		border-radius: 10rpx;
		color: #999999;
	}
	.addBox{
		display: flex;
		align-items: center;
	}
	.tianjiaImg{
		width: 25rpx;
		height: 25rpx;
	}
	.add{
		font-size: 30rpx;
		padding-left: 16rpx;
	}
	.wyyadd{
		padding-top: 18rpx;
		font-size: 24rpx;
	}
</style>